<template>
  <div class="settle-payCompang-form">
    <div class="boxWrap">
      <div class="footerTittle">基础信息</div>
      <el-form :model="formData" :disabled="isDetail" ref="formData" label-width="110px" class="form">
        <el-form-item class="flex" label="投诉类型:" prop="strategyName" :rules="rules.strategyName">
          <el-select v-model="formData.strategyName" placeholder="请选择投诉类型" clearable style="width: 100%">
            <el-option v-for="item in appTypeOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="flex" label="子类型:" prop="score" :rules="rules.score">
          <el-select v-model="formData.score" placeholder="请选择子类型" clearable style="width: 100%">
            <el-option v-for="item in statusOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板:" prop="strategyDesc" :rules="rules.strategyDesc">
          <el-input
            type="textarea"
            v-model="formData.strategyDesc"
            placeholder="请输入模板详情"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="footerTittle" v-if="this.routerQurey.type == 'detail'">操作记录</div>
      <RecordInfo :recordInfo="baseInfo" v-if="this.routerQurey.type == 'detail'"></RecordInfo>
    </div>
    <div class="set-btn">
      <el-button @click="goBack(false)">取消</el-button>
      <el-button type="primary" @click="submitForm()" v-if="!isDetail">保存</el-button>
    </div>
  </div>
</template>

<script>
import RecordInfo from '@/components/recordingInformation'
export default {
  name: 'templateManageForm',
  components: {
    RecordInfo
  },
  data() {
    return {
      routerQurey: {},
      baseInfo: {
        createUserName: '',
        createTime: '',
        updateUserName: '',
        updateTime: ''
      },
      statusOptions: [
        { id: 1, value: '启用' },
        { id: 2, value: '停用' }
      ],
      appTypeOptions: [
        { id: 0, value: 'app' },
        { id: 1, value: '小程序' }
      ],
      moduleName: '/customerServiceSystem/templateManage',
      formData: {
        strategyName: '',
        score: '',
        strategyDesc: ''
      },
      rules: {
        strategyName: [
          {
            required: true,
            message: '请选择投诉类型',
            trigger: 'change'
          }
        ],
        score: [
          {
            required: true,
            message: '请选择子类型',
            trigger: 'change'
          }
        ],
        strategyDesc: [
          {
            required: true,
            message: '请输入模板详情',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.routerQurey = this.$route.query
    if (this.routerQurey.type != 'add' && !this.routerQurey.back) {
      this.getDetail()
    }
  },
  computed: {
    isDetail() {
      return this.routerQurey.type === 'detail'
    }
  },
  methods: {
    // 数据回显处理
    getDetail() {
      let params = {
        data: { id: this.routerQurey.id },
        op: 'detail'
      }
      let URL = this.powerList[params.op]
      this.$axios(URL, params).then((res) => {
        if (res.code == 1) {
          let data = JSON.parse(res.data)
          console.log(data)
        }
      })
    },
    goBack(type) {
      this.$router.push({ path: this.moduleName, query: { refresh: type } })
    },
    submitForm() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.submitData()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async submitData() {
      let data = {}
      let params = {
        data,
        op: this.$route.query.type == 'edit' ? 'update' : 'add'
      }
      let URL = this.powerList[params.op]
      let { code, msg } = await this.$axios(URL, params)
      if (code == 1) {
        this.$message.success(msg)
        this.goBack(true)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
